<!DOCTYPE html>
<html>
<head>
<title>Hotspot Styles | Marzipano</title>
<meta name="description" content="Showcase some hotspot styles and effects that may be created with CSS." />
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<style>@-ms-viewport { width: device-width; }</style>
<link rel="stylesheet" href="//www.marzipano.net/demos/common/reset.css">
<link rel="stylesheet" href="//www.marzipano.net/demos/common/hint.css">
<link rel="stylesheet" href="style.css">

</head>
<body>

<!-- Base viewer. -->
<div id="pano"></div>

<script src="../../build/marzipano.js" ></script>
<script src="index.js"></script>


<!--
  Hotspot examples.
  Each hotspot has CSS, HTML and Javascript code.
-->



<!-- Tooltip using the hint.css library -->

<link rel="stylesheet" href="css/hintspot.css">

<div id="hintspot" class="hint--right hint--info hint--bounce" data-hint="hint.css!">
  <a href="https://github.com/chinchang/hint.css" target="_blank">
    <img src="img/hotspot.png" >
  </a>
</div>

<script src="js/hintspot.js" ></script>


<!-- HTML5 tooltip with animation  -->

<link rel="stylesheet" href="css/tooltip.css">

<div id="tooltip">
  <div class="out">
    <div class="in">
      <div class="image"></div>
    </div>
  </div>
  <div class="tip">
    <p>Go to the Furnace Room</p>
    <img src="img/furnace.png">
  </div>
</div>

<script src="js/tooltip.js" ></script>


<!-- Display HTML modal on click -->

<link rel="stylesheet" href="css/info.css">

<div id="info">
  <div class="icon_wrapper">
    <div class="icon">
      <div id="inner_icon" class="inner_icon">
        <div class="icon1"></div>
        <div class="icon2"></div>
      </div>
    </div>
  </div>
  <div class="tip">
    <p>Click to sign up!</p>
  </div>
  <div class="content">
  <div class="image-wrapper">
     <img src="img/marzipano.png">
  </div>
    <div class="content-form">
      <p>Fill the form and we'll open the spam!</p>
      <div>
        <input id="email" type="text" placeholder="Email">
      </div>
      <p>Just kidding, this doesn't do anything</p>
    </div>
    <div class="button_wrapper">
      <button class="close">Close</button>
    </div>
  </div>
</div>
s
<script src="js/info.js" ></script>


<!-- Rotate and show content on hover -->

<link rel="stylesheet" href="css/rotate.css">

<div id="rotate-hotspot" class="rotate-hotspot">
  <div class="rotate-img"></div>
  <div class="rotate-content">
    <h1>Marzipano</h1>
    <p>a 360º media viewer for the modern web</p>
  </div>
</div>

<script src="js/rotate.js" ></script>


<!-- show content on hover -->

<link rel="stylesheet" href="css/reveal.css">

<div id="reveal">
  <img src="img/photo.png">
  <div class="reveal-content">
    <img src="img/photo.jpg">
    <p>Unloading of the coal.</p>
  </div>
</div>

<script src="js/reveal.js" ></script>


<!-- Display HTML modal on click -->

<link rel="stylesheet" href="css/textInfo.css">

<div id="textInfo">
  <div class="hotspot">
    <div class="out"></div>
    <div class="in"></div>
  </div>
  <div class="tooltip-content">
    <p>The Ash Room is the area where ash from the burned and raw coal was collected. Particular emphasis is given to the hard working conditions in this space, due to the intense heat and breathing in of ash from the coal burning. But the museum content does not end here, and examples of forging, carpentry and transport, as well as the origins and types of coal, are also presented. </p>
  </div>
</div>

<script src="js/textInfo.js"></script>


<!-- More info about something -->

<link rel="stylesheet" href="css/expand.css">

<div id="expand">
<h1 class="title">Human</h1>
  <img class="icon" src="img/human.png" >
  <p> (Homo sapiens primarily ssp. Homo sapiens sapiens)</p>

</div>

<script src="js/expand.js"></script>


</body>
</html>
